<template>
  <div>
    <el-table :data="paginatedData" style="width: 100%">
      <el-table-column label="线路" prop="route" />
      <el-table-column label="途径" prop="approach" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="电话" prop="telephone" />
      <el-table-column align="right">
        <template #header>
          <el-button size="samll" @click="showDialogAdd = true">+</el-button>
          <el-input
            v-model="search"
            size="small"
            placeholder="Type to search"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleTop(scope.$index, scope.row)">
            置顶
          </el-button>
          <el-button
            size="small"
            @click="handleChange(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="userList.length"
      ></el-pagination>
      <el-dialog
        title="修改线路信息"
        v-model="showDialog"
        width="40%"
        :close-on-click-modal="false"
      >
        <el-form :model="form" label-width="140px">
          <el-form-item label="route(线路)">
            <el-input
              placeholder="请填写线路名称"
              v-model="form.route"
            ></el-input>
          </el-form-item>
          <el-form-item label="approach(途径)">
            <el-input
              placeholder="请填写线路途径"
              v-model="form.approach"
            ></el-input>
          </el-form-item>
          <el-form-item label="address(地址)">
            <el-input
              placeholder="请填写地址"
              v-model="form.address"
            ></el-input>
          </el-form-item>
          <el-form-item label="telephone(电话)">
            <el-input
              placeholder="请填写电话"
              v-model="form.telephone"
            ></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveForm">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="添加线路信息"
        v-model="showDialogAdd"
        width="40%"
        :close-on-click-modal="false"
      >
        <el-form :model="formAdd" label-width="140px">
          <el-form-item label="route(线路)">
            <el-input
              placeholder="请填写线路名称"
              v-model="formAdd.route"
            ></el-input>
          </el-form-item>
          <el-form-item label="approach(途径)">
            <el-input
              placeholder="请填写线路途径"
              v-model="formAdd.approach"
            ></el-input>
          </el-form-item>
          <el-form-item label="address(地址)">
            <el-input
              placeholder="请填写地址"
              v-model="formAdd.address"
            ></el-input>
          </el-form-item>
          <el-form-item label="telephone(电话)">
            <el-input
              placeholder="请填写电话"
              v-model="formAdd.telephone"
            ></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="showDialogAdd = false">取 消</el-button>
          <el-button type="primary" @click="saveFormAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ref, computed } from "vue";
import { getPathList, DeletePath, UpdatePath, AddPath } from "../api/request";

export default {
  setup() {
    const userList = ref([]);
    const pageSize = ref(5);
    const currentPage = ref(1);
    const showDialog = ref(false);
    const showDialogAdd = ref(false);
    const form = ref({
      route: "",
      approach: "",
      address: "",
      telephone: "",
    });
    const formAdd = ref({
      route: "",
      approach: "",
      address: "",
      telephone: "",
    });

    const saveForm = () => {
      console.log(form.value);
      UpdatePath(form.value).then((res) => {
        console.log(res);
        if (res.code === 200) {
          alert("修改成功！");
        } else {
          alert("修改失败！");
        }
      });
      showDialog.value = false;
    };
    const saveFormAdd = () => {
      console.log(formAdd.value);
      AddPath(formAdd.value).then((res) => {
        console.log(res);
        if (res.code === 200) {
          getPathList().then((res) => {
            userList.value = res;
          });
          alert("添加成功！");
        } else {
          alert("添加失败！");
        }
      });
      showDialogAdd.value = false;
    };

    const search = ref("");
    const filterTableData = computed(() => {
      return userList.value.filter(
        (data) =>
          !search.value ||
          data.route.toLowerCase().includes(search.value.toLowerCase()) ||
          data.approach.toLowerCase().includes(search.value.toLowerCase()) ||
          data.address.toLowerCase().includes(search.value.toLowerCase()) ||
          data.telephone.toLowerCase().includes(search.value.toLowerCase())
      );
    });

    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filterTableData.value.slice(start, end);
    });

    getPathList().then((res) => {
      userList.value = res;
    });

    const handleTop = (index) => {
      const temp = userList.value[index];
      userList.value.splice(index, 1);
      userList.value.unshift(temp);
    };
    const handlePageChange = (page) => {
      currentPage.value = page;
    };

    const handleDelete = (index, row) => {
      DeletePath({ ID: row.ID }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          userList.value.splice(index, 1);
          alert("删除成功");
        } else {
          alert("删除失败");
        }
      });
    };

    const handleChange = (index, row) => {
      showDialog.value = true;
      form.value = row;
    };

    return {
      userList,
      pageSize,
      currentPage,
      showDialog,
      showDialogAdd,
      form,
      formAdd,
      saveForm,
      saveFormAdd,
      search,
      filterTableData,
      paginatedData,
      handlePageChange,
      handleTop,
      handleDelete,
      handleChange,
    };
  },
};
</script>
<style>

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}


.pagination-wrapper {
  background-color: #ff9eb5; 
  padding: 10px; 
  border-radius: 5px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

.pagination-wrapper a {
  color: #fff; 
  font-size: 16px;
  margin: 0 5px;
  text-decoration: none; 
}

.pagination-wrapper a:hover {
  text-decoration: underline; 
}

.pagination-wrapper .active {
  font-weight: bold; 
}

</style>